<template>
  <div>
      <h2 class="doc-d-flex doc-justify-center doc-align-center doc-mt-1 ">
        {{ $route.meta.title }}组件文档
      </h2>
      <hr class="doc-my-1">
      <div class="doc-d-flex doc-justify-center doc-my-1">
        <input class="docSearchInput" v-model="searchVal" @input="search(searchVal)" type="text" placeholder="搜索组件">
      </div>
      <div :style="{height: `${cataHeight-260}px`}" style="overflow:auto">
        <div class="doc-py-1" :class="selectDocIndex === index ? 'docSelect' : ''" @click="selectDocIndex = index;$emit('select', index)"
          v-for="(item, index) in list"
          :key="index">
          
          🔰{{ item.name }}
          {{ item.doc.name ? '(' : ''}}
          {{ item.doc.name }}
          {{ item.doc.name ? ')' : ''}}
          
        </div>
      </div>
      <!-- 📂{{ item.url }} -->
  </div>
</template>
<script>
export default {
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  created(){
    let tempList = this.deepClone(this.list)
    tempList.map(e => {
      let fComIndex = e.url.indexOf('src/components/')
      if(fComIndex > -1){
        e.url = e.url.substring(15)
        e.purl = e.url
      }
      return e
    })
    // console.log('tempList', tempList);
    // let tempTreeList = this.listTranTree(tempList)
    // console.log('tempTreeList', tempTreeList);
  },
  data: () => ({
    searchVal: '',
    selectDocIndex: 0,
    cataHeight: document.documentElement.clientHeight,
    treeList: [
      {
        name: 'common',
        label: 1,
        list: [
          {},{}
        ],
        children: [
          {
            name: 'TT',
            label: 2,
            list: [
              {},{}
            ],
            children: [],
          }
        ],
      },
      {
        name: 'system'
      }
    ]
  }),
  methods: {
    search(value){
      if (!value) {
        this.$emit('updateList')
        return false
      }
      const fDocList = this.list.filter(e => {
        // 统一转小写 忽略大小写搜索
        const searchVal =  value.toLowerCase()

        // name 判断
        const eName = e.name.toLowerCase()
        let fENameIndex = eName.indexOf(searchVal)

        // docName 判断
        const docName = e.doc.name ? e.doc.name.toLowerCase() : ''
        let fDocNameIndex = docName.indexOf(searchVal)

        return fENameIndex > -1 || fDocNameIndex > -1
      })
      // 搜索到值 则显示搜索内容
      if(fDocList.length !== 0){
        this.selectDocIndex = 0
        this.$emit('updateList', fDocList);
      } 
    },
    listTranTree(list){
      this.getTreeList(list)
    },
    /**
     * 返回树结构
     */
    getTreeList(list){
      list.forEach(item => {
        item.purl.indexOf('/')
        // let fIndex = item.purl.indexOf('/')
        // if(fIndex > -1){
        // }
      })
    },
    hh(i, list, treeList){
      list.forEach(item => {
        let fIndex = item.purl.indexOf('/')
        if(fIndex > -1){ // 为目录
          let mlName = item.purl.substring(0, fIndex)
          // 剪断该级 循环下级
          item.purl = item.purl.substring(fIndex + 1)
          if (i === 1){
            treeList.push({
              mlName: mlName,
              type: i,
              children: [],
              ...item
            })
          }
          // this.listTranTree([item], treeList)
        } else { // 为控件
          treeList.push({
            type: 2,
            ...item
          })
        }
        i += 1
      })
    },
    deepClone(source) {
      if (!source && typeof source !== 'object') {
      throw new Error('error arguments', 'deepClone')
      }
      const targetObj = source.constructor === Array ? [] : {}
      Object.keys(source).forEach(keys => {
      if (source[keys] && typeof source[keys] === 'object') {
        targetObj[keys] = this.deepClone(source[keys])
      } else {
        targetObj[keys] = source[keys]
      }
      })
      return targetObj
    },
  }
}
</script>
<style scoped>
@import '../public/css/common.css';
</style>